<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/0.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=LatoNoto Serif SC:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"zjingw.github.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":300,"display":"post","padding":18,"offset":12,"onmobile":true},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":true,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="前端知识点总结——CSS好记性不如烂笔头！">
<meta property="og:type" content="article">
<meta property="og:title" content="前端知识点总结-CSS">
<meta property="og:url" content="https://zjingw.github.io/2020/09/25/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-CSS/index.html">
<meta property="og:site_name" content="曾敬威的博客">
<meta property="og:description" content="前端知识点总结——CSS好记性不如烂笔头！">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-09-25T13:53:47.000Z">
<meta property="article:modified_time" content="2020-09-25T13:59:34.965Z">
<meta property="article:author" content="ZJW">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://zjingw.github.io/2020/09/25/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-CSS/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>前端知识点总结-CSS | 曾敬威的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="曾敬威的博客" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
    <a target="_blank" rel="noopener" href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">曾敬威的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">我的折腾笔记</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="home  //首页 fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="user  //关于 fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="tags  //标签 fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="th   //分类 fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="archive //归档 fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="calendar   //日程表 fa-fw"></i>日程表</a>

  </li>
        <li class="menu-item menu-item-sitemap">

    <a href="/sitemap.xml" rel="section"><i class="sitemap   //站点地图 fa-fw"></i>站点地图</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/ZJingW" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://zjingw.github.io/2020/09/25/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-CSS/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/1.jpeg">
      <meta itemprop="name" content="ZJW">
      <meta itemprop="description" content="Ctrl C/Ctrl V拯救世界">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="曾敬威的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          前端知识点总结-CSS
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-09-25 21:53:47 / 修改时间：21:59:34" itemprop="dateCreated datePublished" datetime="2020-09-25T21:53:47+08:00">2020-09-25</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>15k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>13 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="前端知识点总结——CSS"><a href="#前端知识点总结——CSS" class="headerlink" title="前端知识点总结——CSS"></a><strong>前端知识点总结——CSS</strong></h2><p>好记性不如烂笔头！</p>
<a id="more"></a>
<h3 id="1-CSS的概述"><a href="#1-CSS的概述" class="headerlink" title="1.CSS的概述"></a>1.CSS的概述</h3><p>1.什么是CSS?</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">CSS：Cascading Style Sheets层叠样式表，级联样式表（简称：样式表）</span><br></pre></td></tr></table></figure>

<p>2.作用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">设置HTML网页元素的样式</span><br></pre></td></tr></table></figure>

<p>3.HTML与CSS的关系</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">HTML：负责内容的展示</span><br><span class="line">CSS：负责内容（元素）的修饰</span><br></pre></td></tr></table></figure>

<p>4.HTML与CSS之间的使用原则</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">W3C建议尽量使用CSS属性去取代HTML属性来修饰元素</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="2-CSS语法规范"><a href="#2-CSS语法规范" class="headerlink" title="2.CSS语法规范"></a>2.CSS语法规范</h3><p>1.使用CSS样式的方式(重点)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"> 1.内联样式</span><br><span class="line">   又称为行内样式</span><br><span class="line">   特点：将CSS样式定义在HTML开始标记中</span><br><span class="line">   语法：</span><br><span class="line">     &lt;ANY style&#x3D;&quot;样式声明1；样式声明2&quot;&gt;&lt;&#x2F;ANY&gt;</span><br><span class="line"> 样式声明：</span><br><span class="line">      1.由样式属性和值来组成</span><br><span class="line">      2.属性名与值之间用 冒号 连接</span><br><span class="line">      3.多个样式声明之间用 分号 分割</span><br><span class="line">        常用的CSS样式属性 和 值：</span><br><span class="line">      1.设置文本颜色的属性和值</span><br><span class="line">        属性：color</span><br><span class="line">    值：合法的颜色值（英文）</span><br><span class="line">      2.设置背景颜色的属性和值</span><br><span class="line">        属性：background</span><br><span class="line">    值：合法的颜色值（英文）</span><br><span class="line">      3.设置文字大小的属性和值</span><br><span class="line">        属性：font-size</span><br><span class="line">    值：以px或pt为单位的数字</span><br><span class="line">    ex：font-size:30px;</span><br><span class="line"></span><br><span class="line">      2.内部样式</span><br><span class="line">   在网页的头元素中增加一对&lt;style&gt;标记，在&lt;style&gt;标记声明该网页用到的样式规则</span><br><span class="line">   语法： &lt;head&gt;</span><br><span class="line">             &lt;style&gt;</span><br><span class="line">        &#x2F;*注释*&#x2F;</span><br><span class="line"></span><br><span class="line">        样式规则1</span><br><span class="line">        样式规则2</span><br><span class="line">        ...</span><br><span class="line">     &lt;&#x2F;style&gt;</span><br><span class="line">      &lt;&#x2F;head&gt;</span><br><span class="line">    样式规则：由选择器和样式声明组成</span><br><span class="line">选择器：规范了页面中哪些元素能够使用定义好的样式（就是把声明好的样式匹配给页面中的元素）</span><br><span class="line">元素选择器：由元素的名称作为选择器</span><br><span class="line">div,p,h1,span,a,img</span><br><span class="line">选择器&#123;&#125;</span><br><span class="line">ex：div&#123;&#125;</span><br><span class="line">    p&#123;&#125;</span><br><span class="line">样式规则：</span><br><span class="line">   选择器&#123;</span><br><span class="line">      样式声明；</span><br><span class="line">   &#125;</span><br><span class="line">ex:</span><br><span class="line">div&#123;</span><br><span class="line">   color:red;</span><br><span class="line">   font-size:20px;</span><br><span class="line">&#125;</span><br><span class="line">p&#123;</span><br><span class="line">  color:blue;</span><br><span class="line">&#125;</span><br><span class="line">h1&#123;...&#125;</span><br><span class="line"></span><br><span class="line"> 3.外部样式</span><br><span class="line">   独立于任何网页的位置处，声明一个样式表文件（***.css为后缀），</span><br><span class="line">   在.css文件中保存样式规则，然后在网页中引入.css文件。</span><br><span class="line">   使用步骤：</span><br><span class="line">       1.创建样式表文件，并编写样式规则</span><br><span class="line">   2.在网页中引入样式表文件</span><br><span class="line">     &lt;head&gt;</span><br><span class="line">        &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;**.css&quot;&gt;</span><br><span class="line">     &lt;&#x2F;head&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="3-CSS样式特征"><a href="#3-CSS样式特征" class="headerlink" title="3.CSS样式特征"></a>3.CSS样式特征</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">1.继承性</span><br><span class="line">  大部分样式可以被继承（子元素继承父元素的样式特征）</span><br><span class="line">  必须是有层级关系的嵌套</span><br><span class="line">  &lt;div style&#x3D;&quot;color:red;&quot;&gt;</span><br><span class="line">     &lt;p&gt;p&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">2.层叠性 </span><br><span class="line">  可以为一个元素定义多个样式，当样式属性不冲突时，可以同时将这些样式应用到元素上</span><br><span class="line">  div&#123;</span><br><span class="line">     color:red;</span><br><span class="line">  &#125;</span><br><span class="line">  div&#123;</span><br><span class="line">     font-size:20px;</span><br><span class="line">  &#125;</span><br><span class="line">  div&#123;</span><br><span class="line">     background:gray;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">3.优先级</span><br><span class="line">  如果样式声明冲突时，会按照样式的优先级来应用定义的样式规则</span><br><span class="line">      由低到高：</span><br><span class="line">     浏览器默认设置       最低</span><br><span class="line">     内部样式和外部样式   中(就近原则)</span><br><span class="line">     内联样式             最高</span><br><span class="line"></span><br><span class="line">4.调整显示的优先级</span><br><span class="line">  !important规则：</span><br><span class="line">  调整显示的优先级</span><br><span class="line">  将!important添加在属性值之后，与值之间用空格隔开，就能优先使用当前样式</span><br><span class="line">  ex:</span><br><span class="line">    color:red !important;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="4-CSS基础选择器（重点）"><a href="#4-CSS基础选择器（重点）" class="headerlink" title="4.CSS基础选择器（重点）"></a>4.CSS基础选择器（重点）</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">1.选择器的作用</span><br><span class="line">  规范页面中哪些元素能够使用定义好的样式</span><br><span class="line">2.选择器详解</span><br><span class="line">  1.通用选择器</span><br><span class="line">    作用：可以修饰页面上的任何元素</span><br><span class="line">语法：*&#123;样式声明&#125;</span><br><span class="line">效率较低，尽量少用</span><br><span class="line">ex:</span><br><span class="line">  *&#123;</span><br><span class="line">    color:red;</span><br><span class="line">    font-size:40px;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>2.元素选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">    作用：设置页面上某种（类）元素的样式</span><br><span class="line">语法：标记名称&#123;声明样式&#125;</span><br><span class="line">ex：</span><br><span class="line">  div&#123;&#125;</span><br><span class="line">  p&#123;&#125;</span><br><span class="line">  span&#123;&#125;  </span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>3.类选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">    作用：定义页面上某个或某些元素的样式(谁想用谁就可以引用)</span><br><span class="line">特点：通过元素的class属性进行引用</span><br><span class="line">语法：</span><br><span class="line">   1.声明</span><br><span class="line">     .类名&#123;样式声明&#125;</span><br><span class="line">     注意：</span><br><span class="line">       1.类名是自定义的，但是注意类名不能以数字开头</span><br><span class="line">       2.类名不能包含特殊符号（&amp;,^,%,$,#,@）</span><br><span class="line">       3.可以包含（_,-）</span><br><span class="line">   2.引用</span><br><span class="line">     &lt;ANY class&#x3D;&quot;类名&quot;&gt;</span><br><span class="line"></span><br><span class="line">    特殊用法：</span><br><span class="line">       1.多类选择器</span><br><span class="line">     让一个元素同时引用多个类选择器</span><br><span class="line">     语法：</span><br><span class="line">     &lt;ANY class&#x3D;&quot;类名1 类名2 类名3 ...&quot;&gt;</span><br><span class="line"></span><br><span class="line">       2.分类选择器</span><br><span class="line">     将元素选择器和类选择器联合使用</span><br><span class="line">     对同一类元素中某些特殊的内容进行修饰</span><br><span class="line">     语法：元素名称.类选择器&#123;样式声明&#125;</span><br><span class="line">        ex:div.text&#123;color:red;&#125;</span><br><span class="line">      &lt;div class&#x3D;&quot;text&quot;&gt;dddd&lt;&#x2F;div&gt;</span><br><span class="line">      &lt;div&gt;d1d1d1&lt;&#x2F;div&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>4.id选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">作用：设置指定ID元素的样式（专属定制）</span><br><span class="line">语法：#id值&#123;样式声明&#125;</span><br><span class="line">ex:</span><br><span class="line">  &lt;div id&#x3D;&quot;one&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  #one&#123;</span><br><span class="line">    color:red;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>5.群组选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">作用：将多个选择器放在一起进行样式的声明定义</span><br><span class="line">语法：选择器1,选择器2,选择器3,...&#123;样式声明&#125;</span><br><span class="line"> ex:</span><br><span class="line">   div,#main,.mycolor,p.text&#123;color:red;&#125;</span><br><span class="line">   等同于：</span><br><span class="line"> div&#123;color:red&#125;;</span><br><span class="line"> #main&#123;color:red&#125;;</span><br><span class="line"> .mycolor&#123;color:red&#125;;</span><br><span class="line"> p.text&#123;color:red&#125;;</span><br></pre></td></tr></table></figure>

<p>6.后代选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">作用：通过元素的后代关系匹配元素（多级嵌套）</span><br><span class="line">语法：选择器1 选择器2 选择器3&#123;样式声明&#125;</span><br></pre></td></tr></table></figure>

<p>7.子代选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">作用：通过元素的子代（一层层级关系）关系匹配元素</span><br><span class="line">语法：选择器1&gt;选择器2&#123;样式声明&#125;</span><br></pre></td></tr></table></figure>

<p>8.伪类选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">作用：匹配元素不同的状态的选择器</span><br><span class="line">语法：</span><br><span class="line">   所有的伪类都是以：作为开始</span><br><span class="line">   选择器：伪类选择器&#123;样式声明&#125;</span><br><span class="line">1.连接伪类</span><br><span class="line">     :link 匹配元素尚未访问的状态</span><br><span class="line"> :visited 匹配元素访问过的状态</span><br><span class="line">2.动态伪类</span><br><span class="line">     :hover 匹配鼠标悬停在元素上时的状态</span><br><span class="line"> :active 匹配元素被激活时的状态（超链接，文本框，密码框点击的时候）</span><br><span class="line"> :focus 匹配元素获取焦点时的状态（文本框和密码框）</span><br><span class="line"></span><br><span class="line">3.选择器的优先级</span><br><span class="line">  权值：标识当前选择器的重要程度，权值越大优先级越高。</span><br><span class="line">    元素选择器：1</span><br><span class="line">类选择器：  10</span><br><span class="line">伪类选择器：10</span><br><span class="line">ID选择择器：100</span><br><span class="line">内联样式：  1000</span><br><span class="line"></span><br><span class="line">选择器的权值加到一起，大的优先</span><br><span class="line">权值相同，以后定义的为主</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="5-尺寸与边框"><a href="#5-尺寸与边框" class="headerlink" title="5.尺寸与边框"></a>5.尺寸与边框</h3><p>1.单位</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">1.尺寸单位</span><br><span class="line">  1.px：像素</span><br><span class="line">    1024*768</span><br><span class="line">  2.in:英寸</span><br><span class="line">    1in&#x3D;2.54cm</span><br><span class="line">  3.pt：磅(1pt&#x3D;1&#x2F;72in)</span><br><span class="line">    多数用于表示文字的大小</span><br><span class="line">  4.cm:厘米</span><br><span class="line">  5.mm:毫米</span><br><span class="line">  6.em:相对于父元素乘以倍数(多个父元素2em)</span><br><span class="line">  7.rem:根相对（元素字体大小乘以倍数，html\body）</span><br><span class="line"></span><br><span class="line">2.颜色单位（颜色取值）</span><br><span class="line">  1.英文单词</span><br><span class="line">    red,blue,gray,green,yellow,black....</span><br><span class="line">  2.rgb(r,g,b)</span><br><span class="line">    r:0-255</span><br><span class="line">g:0-255</span><br><span class="line">b:0-255</span><br><span class="line">  3.rgba(r,g,b,alpha)</span><br><span class="line">    alpha:透明度，取值为0-1之间的小数，值越大，不透明度越高</span><br><span class="line">  4.#rrggbb</span><br><span class="line">    由6位16进制的数字\字母表示一个颜色</span><br><span class="line">0-9或A-f</span><br><span class="line">#000000:黑色</span><br><span class="line">#ffffff:白色</span><br><span class="line">#eeeeee:灰色</span><br><span class="line">#ff11aa</span><br><span class="line">  5.#rgb是上面的缩写形式</span><br><span class="line">    #000:黑色</span><br><span class="line">#fff:白色</span><br><span class="line">#f1a</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>2.尺寸属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">1.作用</span><br><span class="line">  设置元素的宽度和高度</span><br><span class="line">2.语法</span><br><span class="line">  1.宽度</span><br><span class="line">    width:宽度</span><br><span class="line">min-width:最小宽度</span><br><span class="line">max-width:最大宽度</span><br><span class="line">  2.高度</span><br><span class="line">    height：高度</span><br><span class="line">min-height:最小高度</span><br><span class="line">max-height:最大高度</span><br><span class="line">3.页面中哪些元素允许设置尺寸属性</span><br><span class="line">  1.所有的块级元素都允许设置尺寸</span><br><span class="line">    div,p,h1,h2..h6,ul,ol,dl,结构标记</span><br><span class="line">  2.本身具备width和height属性的行内元素是可以设置的</span><br><span class="line">    img,table</span><br><span class="line">  3.行内块允许设置尺寸</span><br><span class="line">    大部分的表单控件（单选按钮，复选框）</span><br><span class="line">  4.大部分的行内元素是无法设置尺寸</span><br><span class="line">    a,span,b,i,u,s等</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>3.溢出处理</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">当内容多，元素区域小的时候，就会产生溢出的效果，默认都是纵向溢出。</span><br><span class="line">属性：overflow,overflow-x,overflow-y</span><br><span class="line">取值：</span><br><span class="line">   1.visible</span><br><span class="line">     可见的，默认值，溢出可见</span><br><span class="line">   2.hidden</span><br><span class="line">     隐藏的，溢出的内容全部隐藏，溢出内容不可见</span><br><span class="line">   3.scroll</span><br><span class="line">     显示滚动条，溢出时，可用</span><br><span class="line">   4.auto</span><br><span class="line">     自动，溢出时才显示滚动条并可用</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>4.边框</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line">1.边框属性</span><br><span class="line">  1.简写方式</span><br><span class="line">    border:width style color;</span><br><span class="line">     width:边框的宽度，以px为单位的数值</span><br><span class="line">     style:边框的样式</span><br><span class="line">       取值：</span><br><span class="line">         solid:实线</span><br><span class="line">     dotted:虚线边框(点)</span><br><span class="line">     dashed:虚线边框(线)</span><br><span class="line">     color:边框的颜色</span><br><span class="line">         取值：合法的颜色值</span><br><span class="line">     transparent:透明色</span><br><span class="line">     注意：</span><br><span class="line">       取消边框：border:0;或border:none;</span><br><span class="line"></span><br><span class="line">  2.单边定义</span><br><span class="line">    只设置某一条边的边框</span><br><span class="line">属性：border-方向:width style color;</span><br><span class="line">    方向：top&#x2F;bottom&#x2F;left&#x2F;right</span><br><span class="line">       上   下     左   右</span><br><span class="line"></span><br><span class="line">  3.单属性定义</span><br><span class="line">    只设置四条边框的一个属性</span><br><span class="line">属性：border-width&#x2F;style&#x2F;color:值；</span><br><span class="line">  ex:border-width:3px;</span><br><span class="line">     border-style:dotted;</span><br><span class="line">     border-color:red;</span><br><span class="line"></span><br><span class="line">  4.单边单属性的定义</span><br><span class="line">    只设置某一个方向的某一个属性</span><br><span class="line">属性：</span><br><span class="line">  border-方向-属性：值；</span><br><span class="line">  方向：top&#x2F;bottom&#x2F;left&#x2F;right</span><br><span class="line">  属性：width&#x2F;style&#x2F;color</span><br><span class="line">  ex：</span><br><span class="line">    border-left-color:blue;</span><br><span class="line">    border-right-style:solid;</span><br><span class="line">    border-bottom-width:6px;</span><br><span class="line">2.边框倒角</span><br><span class="line">  将元素的直角倒换成圆角</span><br><span class="line">  属性：border-radius</span><br><span class="line">  取值：</span><br><span class="line">        1.以px为单位的数值</span><br><span class="line">        2.百分比 %  设置圆形（50%）</span><br><span class="line"></span><br><span class="line">  单角设置：</span><br><span class="line">     border-top-left-radius:左上角</span><br><span class="line"> border-top-right-radius:右上角</span><br><span class="line"> border-bottom-left-radius:左下角</span><br><span class="line"> border-bottom-right-radius:右下角</span><br><span class="line">3.边框阴影</span><br><span class="line"> 属性：box-shadow</span><br><span class="line"> 取值：h-shadow v-shadow blur spread color inset</span><br><span class="line">    h-shadow:阴影在水平方向的偏移距离，必须值   </span><br><span class="line">     取值为正：阴影向右偏移</span><br><span class="line">     取值为负：阴影向左偏移</span><br><span class="line">v-shadow:阴影在垂直方向的偏移距离，必须值   </span><br><span class="line">     取值为正：阴影向下偏移</span><br><span class="line">     取值为负：阴影向上偏移</span><br><span class="line">blur:阴影模糊距离，取值越大，模糊效果越明显，以px为单位的数值（可选值）</span><br><span class="line">spread:阴影的大小，指定要在基础阴影上扩充出来的大小，取值以px为单位的数值（可选值）</span><br><span class="line">color:阴影颜色（可选值）</span><br><span class="line">inset:将默认的外阴影改为内阴影（可选值）</span><br><span class="line"></span><br><span class="line">4.轮廓</span><br><span class="line">  轮廓指的是边框的边框，绘制于边框外围的一条线</span><br><span class="line">  属性：</span><br><span class="line">     outline:width style color;</span><br><span class="line"> widht:轮廓的宽度</span><br><span class="line"> style:轮廓的样式  </span><br><span class="line">    取值：solid&#x2F;dotted&#x2F;dashed</span><br><span class="line"> color:轮廓的颜色</span><br><span class="line"></span><br><span class="line">  取消轮廓：</span><br><span class="line">       outline:none&#x2F;0;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="6-框模型"><a href="#6-框模型" class="headerlink" title="6.框模型"></a>6.框模型</h3><p>1.什么是框模型</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">框模型：box model,定义了元素框处理元素的内容，内边距，外边距以及边框的一种计算方式。</span><br><span class="line">外边距：元素与元素之间的空白间距</span><br><span class="line">内边距：元素边框与元素内容之间的间距</span><br><span class="line">框模型的计算模式：</span><br><span class="line">    元素的实际占地宽度&#x3D;左右外边距+左右边框+左右内边距+width;</span><br><span class="line">元素的实际占地高度&#x3D;上下外边距+上下边框+上下的内边距+height</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="7-外边距"><a href="#7-外边距" class="headerlink" title="7.外边距"></a>7.外边距</h3><p>1.什么是外边距</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">围绕在元素边框外的空白距离，就是外边距</span><br><span class="line">也能表示当前元素与其他元素之间的空白距离</span><br></pre></td></tr></table></figure>

<p>2.语法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">属性：</span><br><span class="line">   margin 定义某个元素四个方向的外边距</span><br><span class="line">   margin-top&#x2F;bottom&#x2F;left&#x2F;right 定义单边的外边距</span><br><span class="line">取值：</span><br><span class="line">   1.具体数值，以px为单位</span><br><span class="line">   2.取值为负</span><br><span class="line">     让元素向相反的方向移动</span><br><span class="line"> margin-left:</span><br><span class="line">  取值为正，让元素向右移动</span><br><span class="line">  取值为负，让元素向左移动</span><br><span class="line"> margin-top:</span><br><span class="line">  取值为正，让元素向下移动</span><br><span class="line">  取值为负，让元素向上移动</span><br><span class="line">   3.取值为%</span><br><span class="line">     外边距的值，是父元素的宽或高的占比（50%）</span><br><span class="line">   4.取值为auto</span><br><span class="line">     自动计算外边距的值（控制块级元素水平居中对齐）</span><br><span class="line"></span><br><span class="line">简写方式：</span><br><span class="line">    1.margin:value</span><br><span class="line">  四个方向的外边距</span><br><span class="line">2.margin:v1 v2;</span><br><span class="line">  v1:上下外边距</span><br><span class="line">  v2:左右外边距</span><br><span class="line">3.margin:v1 v2 v3;</span><br><span class="line">  v1:上外边距</span><br><span class="line">  v2:左右外边距</span><br><span class="line">  v3:下外边距</span><br><span class="line">3.margin:v1 v2 v3 v4;</span><br><span class="line">         上 右 下 左  （顺时针方向）</span><br></pre></td></tr></table></figure>

<p>3.自带外边距的元素</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">body,h1~h6,p,ul,ol,dl,dd,pre</span><br><span class="line">通过CSS Reset(css重写)的手段，来重置具备外边距的元素</span><br><span class="line"> body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,pre&#123;</span><br><span class="line">    margin:0;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<p>4.外边距的特殊效果</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">1.外边距合并</span><br><span class="line">  当两个垂直外边距相遇时，他们将合并为一个，最终取决于两个外边距中距离较大的那个。</span><br><span class="line">  如果两个外边距相遇时值相等，那么取其中一个值。</span><br><span class="line">2.外边距的溢出</span><br><span class="line">  在某些条件下，为子元素设置上外边距时，有可能会作用到父元素上。</span><br><span class="line">      1.父元素没有上边框</span><br><span class="line">  2.为子元素设置上外边距时</span><br><span class="line"></span><br><span class="line">2.在d2中嵌套一个子元素div,id&#x3D;&quot;d3&quot;,设置其尺寸为100*100，并设置其背景颜色</span><br><span class="line">3.设置d3的上外边距为50px,观察其结果。</span><br><span class="line"> 解决溢出方案：</span><br><span class="line">    1.为父元素增加上边框</span><br><span class="line">  弊端：对父元素的高度有影响</span><br><span class="line">2.使用父元素的上内边距来取代子元素的上外边距</span><br><span class="line">  弊端：对父元素的高度有影响</span><br><span class="line">3.在父元素的第一个子元素位置处，增加一个空(table)</span><br><span class="line"> 行内元素以及行内块元素的垂直外边距</span><br><span class="line">     1.行内元素垂直外边距无效（img除外）</span><br><span class="line"> 2.行内块元素，设置垂直外边距时，整行元素都跟着发生改变</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="8-内边距"><a href="#8-内边距" class="headerlink" title="8.内边距"></a>8.内边距</h3><p>1.什么是内边距</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">元素边框与内容之间的空白距离</span><br><span class="line">内边距会扩大元素边框占地区域</span><br></pre></td></tr></table></figure>

<p>2.语法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">属性：</span><br><span class="line">   padding 四个方向的内边距</span><br><span class="line">   padding-top&#x2F;bottom&#x2F;left&#x2F;right 设置单边内边距</span><br><span class="line">取值：</span><br><span class="line">      以px为单位的数值</span><br><span class="line">      以%形式设置</span><br><span class="line">简写方式：</span><br><span class="line">      1.padding:value;  四个方向的内边距</span><br><span class="line">  2.padding:v1 v2; </span><br><span class="line">    v1:上下内边距</span><br><span class="line">    v2:左右内边距</span><br><span class="line">  3.padding:v1 v2 v3;</span><br><span class="line">    v1:上</span><br><span class="line">    v2:左右</span><br><span class="line">    v3:下</span><br><span class="line">  4.padding:v1 v2 v3 v4;</span><br><span class="line">            上 右 下 左 （顺时针）</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="9-属性：box-sizing"><a href="#9-属性：box-sizing" class="headerlink" title="9.属性：box-sizing"></a>9.属性：box-sizing</h3><p>作用：指定框模型的计算方式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">取值：</span><br><span class="line">   1.content-box</span><br><span class="line">     默认值，采用默认的计算元素的占地区域</span><br><span class="line"> 实际占地宽度&#x3D;左右边框+左右外边距+左右内边距+width;</span><br><span class="line"> 实际占地高度&#x3D;上下边框+上下外边距+上下内边距+height;</span><br><span class="line">   2.border-box</span><br><span class="line">     元素的尺寸，会包含border以及padding的值</span><br><span class="line"> 实际占地宽度&#x3D;width(包含了border和padding)</span><br><span class="line"> 实际占地高度&#x3D;height(包含了border和padding)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>3.背景属性<br>背景：可以是单一颜色或图片填充元素<br>1.背景色</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">属性：background-color</span><br><span class="line">取值：合法的颜色值</span><br><span class="line">注意：背景颜色默认是从边框的位置处开始填充的</span><br></pre></td></tr></table></figure>

<p>2.背景图片</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">属性：background-image</span><br><span class="line">取值：url(图片的路径);</span><br><span class="line">ex:background-image:url(a.jpg);</span><br></pre></td></tr></table></figure>

<p>3.背景图片平铺</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">属性：background-repeat</span><br><span class="line">取值：</span><br><span class="line">   repeat 默认值，横向纵向都平铺</span><br><span class="line">   no-repeat 不平铺（图片只显示一次）</span><br><span class="line">   repeat-x 只在水平方向平铺</span><br><span class="line">   repeat-y 只在垂直方向平铺</span><br></pre></td></tr></table></figure>

<p>4.背景图片尺寸</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">属性：background-size</span><br><span class="line">取值：</span><br><span class="line">   1.width&#x2F;height  (ex:200px 300px)</span><br><span class="line">   2.width%&#x2F;height%  (ex:50% 50% 是元素自己的高宽占比)</span><br><span class="line">   3.cover</span><br><span class="line">     将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止。</span><br><span class="line">   4.contain</span><br><span class="line">     将背景图等比放大，直到背景图碰到元素的某一个边缘为止</span><br></pre></td></tr></table></figure>

<p>5.背景图片固定</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">作用：将背景图固定在网页的某个位置处，一直在可视区域中，不会随着滚动条而发生位置的变化。</span><br><span class="line">属性：background-attachment</span><br><span class="line">取值：</span><br><span class="line">   1.scroll 默认值，滚动</span><br><span class="line">   2.fixed 固定</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>6.背景图片定位</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">作用：改变背景图在元素中的位置</span><br><span class="line">属性：background-position</span><br><span class="line">取值：</span><br><span class="line">   1.x y  具体的数值（px）</span><br><span class="line">     x:</span><br><span class="line">   背景图水平偏移距离</span><br><span class="line">   取值为正，向右移动</span><br><span class="line">   取值为负，向左移动</span><br><span class="line"> y:</span><br><span class="line">   背景图垂直偏移距离</span><br><span class="line">   取值为正，向下移动</span><br><span class="line">   取值为负，向上移动</span><br><span class="line">   2.x% y%</span><br><span class="line">     0% 0% 背景图在左上角</span><br><span class="line"> 100% 100% 背景图在右下角</span><br><span class="line"> 50% 50% 背景图在中间位置</span><br><span class="line">   3.关键字</span><br><span class="line"> x:left&#x2F;center&#x2F;right</span><br><span class="line"> y:top&#x2F;center&#x2F;bottom</span><br><span class="line"> ex:background-position:right top;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>7.背景简写属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">在一个属性中指定背景的多个属性值</span><br><span class="line">属性：background</span><br><span class="line">取值：color url() repeat attachment position</span><br><span class="line">ex：</span><br><span class="line">  background:gray url(a.jpg);</span><br><span class="line">注意：</span><br><span class="line">  如果不设置其中某个属性值的话，该位置采用默认值。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="8-渐变"><a href="#8-渐变" class="headerlink" title="8.渐变"></a>8.渐变</h3><p>1.什么是渐变</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">渐变指定是多种颜色平缓变换的一种显示效果。</span><br></pre></td></tr></table></figure>

<p>2.渐变的主要因素</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1.色标：一种颜色及其出现的位置</span><br><span class="line">2.一个渐变是由多个色标组成（至少两个）</span><br></pre></td></tr></table></figure>

<p>3.渐变分类</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1.线性渐变</span><br><span class="line">  以直线的方向来填充效果</span><br><span class="line">2.径向渐变</span><br><span class="line">  以圆形的方式来实现填充</span><br><span class="line">3.重复渐变</span><br><span class="line">  将线性渐变或径向渐变 重复几次实现填充</span><br></pre></td></tr></table></figure>

<p>4.渐变详解</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">1.线性渐变</span><br><span class="line">  属性：background-image</span><br><span class="line">  取值：linear-gradient(angle,color-point1,color-point2,....);</span><br><span class="line">    1.angle</span><br><span class="line">  表示渐变填充的方向或角度</span><br><span class="line">  取值：</span><br><span class="line">    1.关键字</span><br><span class="line">      to top 从下向上填充渐变色</span><br><span class="line">      to bottom 从上向下填充渐变色</span><br><span class="line">      to left 从右向左填充渐变色</span><br><span class="line">      to right 从左向右填充渐变色</span><br><span class="line">    2.角度值</span><br><span class="line">     0deg 从下向上填充，等同于to top</span><br><span class="line">     90deg 从左向右填充，等同于to right</span><br><span class="line">     180deg 从上到下填充，等同于to bottom</span><br><span class="line">     270deg 从右向左填充，等同于to left</span><br><span class="line">    2.color-point</span><br><span class="line">  色标：颜色 及其 位置</span><br><span class="line">  取值：颜色 以及 位置的组合，中间用空格分开</span><br><span class="line">  ex:</span><br><span class="line">    1.red 0%</span><br><span class="line">      在填充方向的开始位置处颜色为红色</span><br><span class="line">    2.green 50%</span><br><span class="line">      到填充方向一半的位置处，颜色变为绿色</span><br><span class="line">    3.blue 200px</span><br><span class="line">      到填充方向的200px的位置处，颜色变为蓝色</span><br><span class="line">2.径向渐变</span><br><span class="line">  属性：</span><br><span class="line">  background-image:radial-gradient([size at position],</span><br><span class="line">  color-point1,color-point2,...);</span><br><span class="line">  size at position: </span><br><span class="line">      size:半径，以px为单位的数值</span><br><span class="line">  position:圆心所在位置</span><br><span class="line">       1.x y 具体数值</span><br><span class="line">       2.x% y% 元素宽和高的占比</span><br><span class="line">       3.关键字</span><br><span class="line">         x:left,center,right</span><br><span class="line">     y:top,center,bottom</span><br><span class="line">  ex：</span><br><span class="line">    100px at right top </span><br><span class="line">半径     右上角位置</span><br><span class="line">3.重复渐变</span><br><span class="line">  1.重复线性渐变</span><br><span class="line">    background-image:repeating-linear-gradient</span><br><span class="line">    (angle,color-point1,color-point2,...);</span><br><span class="line">color-point:位置一定要给绝对数值（px）,不要用相对单位%</span><br><span class="line">  2.重复径向渐变</span><br><span class="line">    background-image:repeating-radial-gradient</span><br><span class="line">    ([size at position],color-point1,color-point2,...);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="9-浏览器兼容性"><a href="#9-浏览器兼容性" class="headerlink" title="9.浏览器兼容性"></a>9.浏览器兼容性</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> 各个浏览器的新版本都支持渐变属性</span><br><span class="line">对于不支持的浏览器版本，可以通过增加浏览器前缀的方式，让浏览器支持渐变属性</span><br><span class="line">Firefox:-moz-</span><br><span class="line">Chrome &amp; Sagari:-webkit-</span><br><span class="line">Opera:-o-</span><br><span class="line">IE:-ms-</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>2.文本格式化属性<br>1.字体属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">1.指定字体</span><br><span class="line">  属性：font-family</span><br><span class="line">  取值：字体名称，名称之间用逗号隔开</span><br><span class="line">  ex：</span><br><span class="line">  font-family:&quot;微软雅黑&quot;,Arial,&quot;黑体&quot;;</span><br><span class="line">2.字体大小</span><br><span class="line">  属性：font-size</span><br><span class="line">  取值：以px或pt为单位的数字</span><br><span class="line">3.字体加粗</span><br><span class="line">  属性：font-weight</span><br><span class="line">  取值：</span><br><span class="line">     1.bold 加粗（b,hn）</span><br><span class="line"> 2.normal 正常</span><br><span class="line"> 3.value 无单位的数字（整百倍）</span><br><span class="line">   400-900</span><br><span class="line">   400：等同于normal</span><br><span class="line">   900：等同于bold</span><br><span class="line">4.字体样式</span><br><span class="line">  属性：font-style</span><br><span class="line">  取值：</span><br><span class="line">     1.normal 正常显示 </span><br><span class="line"> 2.italic 斜体显示</span><br><span class="line">5.小型大写字母</span><br><span class="line">   将小写字符变成大写，但文本的大小与小写字符一致</span><br><span class="line">   属性：font-variant</span><br><span class="line">   取值：</span><br><span class="line">      1.normal 正常</span><br><span class="line">  2.small-caps 小型的大写字符</span><br><span class="line">6.字体属性简写</span><br><span class="line">  属性：font</span><br><span class="line">  取值：style variant weight size family;</span><br><span class="line">  注意：</span><br><span class="line">    如果用简写方式，必须设置family的值，否则无效。</span><br><span class="line">font:12px; 错误</span><br><span class="line">font:12px &quot;黑体&quot;; 正确</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>2.文本格式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">1.文本颜色</span><br><span class="line">  属性：color</span><br><span class="line">  取值：合法的颜色值</span><br><span class="line">2.文本排列</span><br><span class="line">  作用：指定文本，行内，行内块元素的水平对齐方式。</span><br><span class="line">  属性：text-align</span><br><span class="line">  取值：left&#x2F;center&#x2F;right&#x2F;justify(两端对齐)</span><br><span class="line">3.文字修饰（线条）</span><br><span class="line">  属性：text-decoration</span><br><span class="line">  取值：</span><br><span class="line">    none:无任何线条修饰</span><br><span class="line">underline:下划线修饰</span><br><span class="line">overline:上划线修饰</span><br><span class="line">    line-through:删除线修饰</span><br><span class="line">4.行高</span><br><span class="line">  作用:定义一行文本的高度</span><br><span class="line">  特点：如果行高的高度大于字体本身的大小，那么该行文本将在指定的行高内呈现垂直居中的效果。</span><br><span class="line">  属性:line-height</span><br><span class="line">  取值：以px为单位数值</span><br><span class="line">5.首行文本缩进</span><br><span class="line">  属性：text-indent</span><br><span class="line">  取值：以px为单位的数值</span><br><span class="line">6.文本阴影</span><br><span class="line">  属性：text-shadow</span><br><span class="line">  取值：h-shadow v-shadow blur color;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="10-表格"><a href="#10-表格" class="headerlink" title="10.表格"></a>10.表格</h3><p>1.表格的常用属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">1.边距属性：padding</span><br><span class="line">2.边框属性：border</span><br><span class="line">3.尺寸属性：width,height</span><br><span class="line">4.文本格式化属性：font-*,text-*,line-height</span><br><span class="line">5.背景属性：颜色，图片，渐变</span><br><span class="line">6.vertical-align</span><br><span class="line">  作用：指定单元格数据垂直对齐方式</span><br><span class="line">  取值：</span><br><span class="line">     top:上对齐</span><br><span class="line"> middle:居中对齐</span><br><span class="line"> bottom:下对齐</span><br><span class="line"> 练习：创建网页，并在网页中添加表格</span><br><span class="line">     1.表格尺寸为400*400，4行4列;</span><br><span class="line"> 2.每个单元格的尺寸为100*100,内容随意;</span><br><span class="line"> 3.设置表格和单位元格的边框为1px solid #000;</span><br><span class="line"> 4.设置每个单元格的左内边距为20px;</span><br><span class="line"> 5.尝试为每个单元格增加上外边距15px。</span><br></pre></td></tr></table></figure>

<p>2.表格的特殊属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">1.边框合并</span><br><span class="line">  取值：border-collapse</span><br><span class="line">  取值：</span><br><span class="line">     1.separate</span><br><span class="line">   默认值，即分离边框模式</span><br><span class="line"> 2.collapse</span><br><span class="line">   边框合并</span><br><span class="line">2.边框边距</span><br><span class="line">  作用：设置单元格之间或单元格与表格之间的距离</span><br><span class="line">  属性：border-spacing</span><br><span class="line">  取值：</span><br><span class="line">    1.给定一个值：水平和垂直的间距相同</span><br><span class="line">2.给两个值：</span><br><span class="line">  第一个值 表示水平间距</span><br><span class="line">  第二个值 表示垂直间距</span><br><span class="line">注意：只有在边框分离模式下，边框边距才有效果，即border-collapse:separate时，border-spacing才有效。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>3.表格标题位置</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">属性：caption-side</span><br><span class="line">取值：</span><br><span class="line">    1.top:默认值，标题在表格内容之上</span><br><span class="line">2.bottom:标题在表格内容之下</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>4.显示规则</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">作用：用来帮助浏览器指定如何布局一张表，也就是指定td尺寸的计算方式。</span><br><span class="line">属性：table-layout</span><br><span class="line">取值：</span><br><span class="line">   1.auto</span><br><span class="line">     默认值，即自动布局表格，列的尺寸实际上由内容来决定的。</span><br><span class="line">   2.fixed</span><br><span class="line">     固定表格布局，列的尺寸由设置的值为准</span><br><span class="line">自动表格布局VS固定表格布局：</span><br><span class="line">    1.自动表格布局</span><br><span class="line">  1.单元格的大小会适应内容</span><br><span class="line">  2.表格复杂时，加载速度较慢（缺点）</span><br><span class="line">  3.自动表格布局会比较灵活（优点）</span><br><span class="line">  4.适用于不确定每列大小时使用</span><br><span class="line">    2.固定表格布局</span><br><span class="line">  1.单元格的尺寸取决于设定的值</span><br><span class="line">  2.任何情况下都会加载显示表格（优点）</span><br><span class="line">  3.适用于确定每列大小时使用</span><br><span class="line">  4.固定表格布局不够灵活（缺点）</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="11-定位-浮动定位"><a href="#11-定位-浮动定位" class="headerlink" title="11.定位-浮动定位"></a>11.定位-浮动定位</h3><p>1.定位</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">定位：指的是改变元素在页面中的默认位置</span><br></pre></td></tr></table></figure>

<p>2.定位的分类</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">按照定位的效果，可以分成以下几类：</span><br><span class="line">   1.普通流定位（默认的定位方式）</span><br><span class="line">   2.浮动定位</span><br><span class="line">   3.相对定位</span><br><span class="line">   4.绝对定位</span><br><span class="line">   5.固定定位</span><br></pre></td></tr></table></figure>

<p>3.定位详解</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">1.普通流定位</span><br><span class="line">  又称为文档流定位，页面中元素的默认定位方式</span><br><span class="line">  1.每个元素在页面中都有自己的空间</span><br><span class="line">  2.每个元素默认都是在其父元素的左上角开始显示</span><br><span class="line">  3.页面中的块级元素都是从上往下排列，每个元素独占一行</span><br><span class="line">  4.页面中的行内元素以及行内块都是按照从左到右的顺序来排列的</span><br><span class="line"></span><br><span class="line">  要解决的问题：让多个块级元素在一行中显示</span><br><span class="line">2.浮动定位</span><br><span class="line">  1.什么是浮动&amp;特点</span><br><span class="line">    1.元素一旦浮动起来，将不占据页面空间（脱离了文档流），其它未浮动元素将上前补位。</span><br><span class="line">2.浮动元素会停靠在父元素的左边或右边，或其它已经浮动的元素的边缘上。</span><br><span class="line">3.浮动定位解决的问题：能够让多个块级元素在一行中显示。</span><br><span class="line">  2.语法</span><br><span class="line">    属性：float</span><br><span class="line">取值：</span><br><span class="line">   1.left</span><br><span class="line">     左浮动，让元素停靠在父元素的左边或挨着左侧已经浮动的元素</span><br><span class="line">   2.right</span><br><span class="line">     右浮动，让元素停靠在父元素的右边或挨着右侧已经浮动的元素</span><br><span class="line">   3.none</span><br><span class="line">     默认值，即无任何浮动效果</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="12-浮动引发的特殊效果"><a href="#12-浮动引发的特殊效果" class="headerlink" title="12.浮动引发的特殊效果"></a>12.浮动引发的特殊效果</h3><p>1.元素一旦浮动起来以后就会变成块级元素</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">允许修改尺寸</span><br><span class="line">能正常处理垂直方向外边距</span><br></pre></td></tr></table></figure>

<p>2.当父元素显示不下所有已浮动元素时，最后一个将换行，但是，有可能被卡住；<br>3.元素一旦浮动起来后，宽度将以内容为主（未指定宽度情况下）；<br>4.文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会别浮动元素压在底下的，而会巧妙的避开浮动元素。</p>
<h3 id="13-清除浮动带来的影响"><a href="#13-清除浮动带来的影响" class="headerlink" title="13.清除浮动带来的影响"></a>13.清除浮动带来的影响</h3><p>元素一旦浮动起来之后，就会对后续元素带来一定的位置影响（后续元素要上前补位），如果后续元素不想被影响（不想补位），那么就可以通过清除浮动的方式来解决<br>属性：clear<br>取值：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">1.left</span><br><span class="line">  清除当前元素前面的元素左浮动所带来的影响</span><br><span class="line">2.right</span><br><span class="line">  清除当前元素前面的元素右浮动所带来的影响</span><br><span class="line">3.both</span><br><span class="line">  清除当前元素前面元素任何一种浮动所带来的影响</span><br><span class="line">4.none</span><br><span class="line">  默认值，不做任何的清除浮动操作</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="14-浮动元素对父元素高度的影响"><a href="#14-浮动元素对父元素高度的影响" class="headerlink" title="14.浮动元素对父元素高度的影响"></a>14.浮动元素对父元素高度的影响</h3><p>1.元素的高度都是以未浮动元素的高度为准的，浮动元素是不占页面的高度的</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"> 解决父元素的高度方案如下：</span><br><span class="line">    1.直接设置父元素的高度</span><br><span class="line">  弊端：不是每次都知道父元素的高度</span><br><span class="line">2.设置父元素也浮动</span><br><span class="line">  弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素</span><br><span class="line">3.为父元素设置overflow</span><br><span class="line">  取值：hidden或auto</span><br><span class="line">  弊端：如果有内容需要溢出显示的话，也会一同被隐藏</span><br><span class="line">4.在父元素中，追加空子元素(块级)，并设置其clear:both;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="15-显示"><a href="#15-显示" class="headerlink" title="15.显示"></a>15.显示</h3><p>1.显示方式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">1.什么是显示方式</span><br><span class="line">  决定了元素在网页中的表现形式（块级，行内，行内块）</span><br><span class="line">2.语法</span><br><span class="line">  属性：display</span><br><span class="line">  取值：</span><br><span class="line">     1.none 不显示元素-隐藏</span><br><span class="line">   特点：脱离文档流，不占据页面空间</span><br><span class="line"> 2.block</span><br><span class="line">   让元素表现的和块级元素一致</span><br><span class="line">   特点：</span><br><span class="line">      独占一行，可是修改高宽</span><br><span class="line"> 3.inline</span><br><span class="line">   让元素表现的和行内元素一致</span><br><span class="line">   特点：</span><br><span class="line">      不允许修改尺寸</span><br><span class="line">      多个元素在一行中显示</span><br><span class="line">      无法设置垂直外边距</span><br><span class="line"> 4.inline-block</span><br><span class="line">   让元素表现的和行内块元素一致</span><br><span class="line">   特点：</span><br><span class="line">     多个元素在一行中显示，但是可以修改尺寸</span><br><span class="line"> 5.table</span><br><span class="line">   让元素表现的与表格一致</span><br><span class="line">   特点：</span><br><span class="line">      尺寸以内容为准</span><br><span class="line">      每个元素独占一行</span><br><span class="line">      允许修改尺寸</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>2.显示效果</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">1.显示&#x2F;隐藏</span><br><span class="line">  属性：visibility</span><br><span class="line">  取值：</span><br><span class="line">      1.visible:默认值，元素可见</span><br><span class="line">  2.hidden:元素不可见-隐藏</span><br><span class="line">  面试：display:none和visibility:hidden的区别</span><br><span class="line">        display:none 不占页面空间</span><br><span class="line">    visibility:hidden 占页面空间</span><br><span class="line">2.透明度</span><br><span class="line">  属性：opacity</span><br><span class="line">  取值：0.0（完全透明）~1.0（完全不透明）之间的小数</span><br><span class="line">3.垂直方向对齐方式</span><br><span class="line">  属性：vertical-align</span><br><span class="line">  场合：</span><br><span class="line">     1.表格中使用</span><br><span class="line">   取值：top&#x2F;bottom&#x2F;middle</span><br><span class="line"> 2.图片（img）中使用</span><br><span class="line">   取值：</span><br><span class="line">      top：上</span><br><span class="line">      bottom：下</span><br><span class="line">      middle：中间</span><br><span class="line">      baseline:基线对齐，默认值</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="16-光标"><a href="#16-光标" class="headerlink" title="16.光标"></a>16.光标</h3><p>1.作用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">改变鼠标悬停在元素上时，鼠标的状态</span><br></pre></td></tr></table></figure>

<p>2.语法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">属性：cursor</span><br><span class="line">取值：</span><br><span class="line">    1.default: 默认</span><br><span class="line">2.pointer: 小手</span><br><span class="line">3.crosshair: +</span><br><span class="line">4.text: I</span><br><span class="line">5.wait: 等待</span><br><span class="line">6.help: 帮助</span><br><span class="line"> 练习：</span><br><span class="line">   新建一个div元素，当鼠标移入到div上时，让光标变成小手状态。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="17-列表"><a href="#17-列表" class="headerlink" title="17.列表"></a>17.列表</h3><p>1.列表项标记</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">属性：list-style-type</span><br><span class="line">取值：</span><br><span class="line">   1.none</span><br><span class="line">   2.disc</span><br><span class="line">   3.circle</span><br><span class="line">   4.square</span><br></pre></td></tr></table></figure>

<p>2.列表项图像</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">作用：使用自定义图像作为列表项标识</span><br><span class="line">属性：list-style-image</span><br><span class="line">取值：url(图像路径);</span><br></pre></td></tr></table></figure>

<p>3.列表项位置</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">作用：将默认的列表项标识的位置，放到li里面</span><br><span class="line">属性：list-style-position</span><br><span class="line">取值：</span><br><span class="line">   1.outside 默认值，将标识显示在li外面的</span><br><span class="line">   2.inside 将标识放于li里面</span><br></pre></td></tr></table></figure>

<p>4.列表属性简写</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">属性：list-style</span><br><span class="line">取值：type url() position;</span><br><span class="line">常用方式：list-style:none;</span><br><span class="line">列表的使用场合：</span><br><span class="line">   横向排列或纵向排列的内容，都可以使用列表来实现。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="18-定位"><a href="#18-定位" class="headerlink" title="18.定位"></a>18.定位</h3><p>相对定位，绝对定位，固定定位<br>1.定位相关属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">属性：position</span><br><span class="line">取值：</span><br><span class="line">   1.static:静态，默认值</span><br><span class="line">   2.relative:相对定位</span><br><span class="line">   3.absolute:绝对定位</span><br><span class="line">   4.fixed:固定定位</span><br></pre></td></tr></table></figure>

<p>2.偏移属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">top&#x2F;bottom&#x2F;left&#x2F;right</span><br><span class="line">以上四个属性的取值均为数字</span><br><span class="line">ex:</span><br><span class="line">  top:150px 元素向下移动150px</span><br><span class="line">  left:20px 元素向右移动20px</span><br><span class="line">  right:-150px 元素向右移动150px</span><br><span class="line">注意：</span><br><span class="line">  只有已定位元素才能使用偏移属性</span><br></pre></td></tr></table></figure>

<p>3.定位详解</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">1.相对定位</span><br><span class="line">  1.什么是相对定位</span><br><span class="line">    元素相对于它原来的位置偏移某个距离</span><br><span class="line">  2.使用场合</span><br><span class="line">    做元素位置微调时使用</span><br><span class="line">  3.语法</span><br><span class="line">      position:relative;</span><br><span class="line">      配合偏移属性来实现位置的移动</span><br><span class="line">      left:10px;</span><br><span class="line">      top:10px;</span><br><span class="line">2.绝对定位</span><br><span class="line">  1.什么是绝对定位&amp;特点</span><br><span class="line">    1.绝对定位的元素会脱离文档流-不占页面空间</span><br><span class="line">2.绝对定位的元素会相对于离他最近的，已定位的，祖先元素 去实现位置的初始化。</span><br><span class="line">3.如果没有已定位的祖先元素，那么该元素就相对于body去实现位置的初始化</span><br><span class="line">4.配合偏移属性 实现元素位置的修改</span><br><span class="line">  2.语法</span><br><span class="line">    position:absolute;</span><br><span class="line">配合偏移属性实现位置的修改</span><br><span class="line">  3.使用场合</span><br><span class="line">    1.有堆叠效果的元素</span><br><span class="line">2.弹出菜单</span><br><span class="line">  4.注意：</span><br><span class="line">    1.脱离文档流-不占据页面空间</span><br><span class="line">2.绝对定位元素会变成块级元素</span><br><span class="line"></span><br><span class="line">  5.堆叠顺序</span><br><span class="line">    一旦元素变为已定位元素的话，元素们则有可能出现堆叠的效果</span><br><span class="line">属性：z-index</span><br><span class="line">取值：无单位的数字，数字越大越靠上</span><br><span class="line">    注意：</span><br><span class="line">  1.只有已定位元素才能实现堆叠顺序的改变（z-index）</span><br><span class="line">  2.父子元素间，z-index无效，永远都是子元素压在父元素上方</span><br><span class="line">3.固定定位</span><br><span class="line">  1.什么是固定定位</span><br><span class="line">    将元素固定在网页的某个位置处，位置不会随着滚动条而发生改变，固定在可视区域中。</span><br><span class="line">  2.语法</span><br><span class="line">    position:fixed;</span><br><span class="line">配合偏移属性使用</span><br><span class="line">  注意：</span><br><span class="line">    1.固定定位的元素永远都是相对于body去实现位置的初始化和偏移。</span><br><span class="line">2.固定定位的元素会变成块级元素</span><br><span class="line">3.固定定位元素会脱离文档流-不占页面空间</span><br><span class="line"></span><br></pre></td></tr></table></figure>



    </div>

    
    
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>ZJW
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://zjingw.github.io/2020/09/25/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-CSS/" title="前端知识点总结-CSS">https://zjingw.github.io/2020/09/25/前端知识点总结-CSS/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/09/25/JavaScript%E4%B8%AD%E7%90%86%E8%A7%A3%E4%B8%8D%E5%88%B0%E4%BD%8D%E7%9A%84%E4%B8%9C%E4%B8%9C/" rel="prev" title="JavaScript中理解不到位的东东">
      <i class="fa fa-chevron-left"></i> JavaScript中理解不到位的东东
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/09/26/%E5%85%A5%E5%9D%91%E5%B0%8F%E7%A8%8B%E5%BA%8F/" rel="next" title="入坑小程序">
      入坑小程序 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>


        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">
           <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
src="//music.163.com/outchain/player?type=2&id=1383927243&auto=1&height=66"></iframe>

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93%E2%80%94%E2%80%94CSS"><span class="nav-text">前端知识点总结——CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-CSS%E7%9A%84%E6%A6%82%E8%BF%B0"><span class="nav-text">1.CSS的概述</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-CSS%E8%AF%AD%E6%B3%95%E8%A7%84%E8%8C%83"><span class="nav-text">2.CSS语法规范</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-CSS%E6%A0%B7%E5%BC%8F%E7%89%B9%E5%BE%81"><span class="nav-text">3.CSS样式特征</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-CSS%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89"><span class="nav-text">4.CSS基础选择器（重点）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-%E5%B0%BA%E5%AF%B8%E4%B8%8E%E8%BE%B9%E6%A1%86"><span class="nav-text">5.尺寸与边框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-%E6%A1%86%E6%A8%A1%E5%9E%8B"><span class="nav-text">6.框模型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-%E5%A4%96%E8%BE%B9%E8%B7%9D"><span class="nav-text">7.外边距</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-%E5%86%85%E8%BE%B9%E8%B7%9D"><span class="nav-text">8.内边距</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-%E5%B1%9E%E6%80%A7%EF%BC%9Abox-sizing"><span class="nav-text">9.属性：box-sizing</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-%E6%B8%90%E5%8F%98"><span class="nav-text">8.渐变</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7"><span class="nav-text">9.浏览器兼容性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10-%E8%A1%A8%E6%A0%BC"><span class="nav-text">10.表格</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#11-%E5%AE%9A%E4%BD%8D-%E6%B5%AE%E5%8A%A8%E5%AE%9A%E4%BD%8D"><span class="nav-text">11.定位-浮动定位</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#12-%E6%B5%AE%E5%8A%A8%E5%BC%95%E5%8F%91%E7%9A%84%E7%89%B9%E6%AE%8A%E6%95%88%E6%9E%9C"><span class="nav-text">12.浮动引发的特殊效果</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#13-%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E5%B8%A6%E6%9D%A5%E7%9A%84%E5%BD%B1%E5%93%8D"><span class="nav-text">13.清除浮动带来的影响</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#14-%E6%B5%AE%E5%8A%A8%E5%85%83%E7%B4%A0%E5%AF%B9%E7%88%B6%E5%85%83%E7%B4%A0%E9%AB%98%E5%BA%A6%E7%9A%84%E5%BD%B1%E5%93%8D"><span class="nav-text">14.浮动元素对父元素高度的影响</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#15-%E6%98%BE%E7%A4%BA"><span class="nav-text">15.显示</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#16-%E5%85%89%E6%A0%87"><span class="nav-text">16.光标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#17-%E5%88%97%E8%A1%A8"><span class="nav-text">17.列表</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#18-%E5%AE%9A%E4%BD%8D"><span class="nav-text">18.定位</span></a></li></ol></li></ol></div>

  
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="ZJW"
      src="/images/1.jpeg">
  <p class="site-author-name" itemprop="name">ZJW</p>
  <div class="site-description" itemprop="description">Ctrl C/Ctrl V拯救世界</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">7</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">6</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://weibo.com/yourname" title="Weibo → https:&#x2F;&#x2F;weibo.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fab fa-weibo fa-fw"></i>Weibo</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://plus.google.com/yourname" title="Google → https:&#x2F;&#x2F;plus.google.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fab fa-google fa-fw"></i>Google</a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


<div style="">
  <canvas id="canvas" style="width:60%;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
</div>
<script>
(function(){

   var digit=
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0]
        ]//:
    ];

var canvas = document.getElementById('canvas');

if(canvas.getContext){
    var cxt = canvas.getContext('2d');
    //声明canvas的宽高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;
    cxt.fillStyle = '#f00';
    cxt.fillRect(10,10,50,50);

    //存储时间数据
    var data = [];
    //存储运动的小球
    var balls = [];
    //设置粒子半径
    var R = canvas.height/20-1;
    (function(){
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
    })();

    /*生成点阵数字*/
    function renderDigit(index,num){
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }
    }

    /*更新时钟*/
    function updateDigitTime(){
        var changeNumArray = [];
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var NewData = [];
        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        for(var i = data.length-1; i >=0 ; i--){
            //时间发生变化
            if(NewData[i] !== data[i]){
                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
            }
        }
        //增加小球
        for(var i = 0; i< changeNumArray.length; i++){
            addBalls.apply(this,changeNumArray[i].split('_'));
        }
        data = NewData.concat();
    }

    /*更新小球状态*/
    function updateBalls(){
        for(var i = 0; i < balls.length; i++){
            balls[i].stepY += balls[i].disY;
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY;
            if(balls[i].x > W + R || balls[i].y > H + R){
                balls.splice(i,1);
                i--;
            }
        }
    }

    /*增加要运动的小球*/
    function addBalls(index,num){
        var numArray = [1,2,3];
        var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    var ball = {
                        x:14*(R+2)*index + j*2*(R+1)+(R+1),
                        y:i*2*(R+1)+(R+1),
                        stepX:Math.floor(Math.random() * 4 -2),
                        stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                        color:colorArray[Math.floor(Math.random()*colorArray.length)],
                        disY:1
                    };
                    balls.push(ball);
                }
            }
        }
    }

    /*渲染*/
    function render(){
        //重置画布宽度，达到清空画布的效果
        canvas.height = 100;
        //渲染时钟
        for(var i = 0; i < data.length; i++){
            renderDigit(i,data[i]);
        }
        //渲染小球
        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();
        }
    }

    clearInterval(oTimer);
    var oTimer = setInterval(function(){
        //更新时钟
        updateDigitTime();
        //更新小球状态
        updateBalls();
        //渲染
        render();
    },50);
}

})();
</script>
      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">ZJW</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
      <span class="post-meta-item-text">站点总字数：</span>
    <span title="站点总字数">37k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span class="post-meta-item-text">站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">33 分钟</span>
</div><span id="sitetime"></span>
<script language=javascript>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2020,05,14,18,07,00); //北京时间2020-05-14 18:07
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        document.getElementById("sitetime").innerHTML="本站已苟且生存了 "+/*diffYears+" 年 "+*/diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
    }/*因为建站时间还没有一年，就将之注释掉了。需要的可以取消*/
    siteTime();
</script>



<div class="translate-style">
繁/简：<a id="translateLink" href="javascript:translatePage();">繁体
</a>
</div>
<script type="text/javascript" src="/js/tw_cn.js"></script>
<script type="text/javascript">
var defaultEncoding = 2; //网站编写字体是否繁体，1-繁体，2-简体
var translateDelay = 0; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
var cookieDomain = "https://dongguagua.gitee.io"; //Cookie地址, 一定要设定, 通常为你的网址
var msgToTraditionalChinese = "繁体"; //此处可以更改为你想要显示的文字
var msgToSimplifiedChinese = "简体"; //同上，但两处均不建议更改
var translateButtonId = "translateLink"; //默认互换id
translateInitilization();
</script>

 <div class="powered-by">
  <i class="fa fa-user-md"></i>
  <span id="busuanzi_container_site_uv">
    本站总访客数:<span id="busuanzi_value_site_uv"></span>&nbsp;&nbsp;| 
  </span>
  <span id="busuanzi_container_site_pv">
      &nbsp;本站总访问量<span id="busuanzi_value_site_pv"></span>次
  </span>
  </div>
  </div>
        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  















  

  


  <script async src="/js/cursor/fireworks.js"></script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/miku.model.json"},"display":{"position":"right","width":150,"height":350},"mobile":{"show":true},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
